@import '../../../res/theme/xxhz.scss';

page, .member-page {
  background: #fff;
  min-height: 100vh;
}

.member-page {
  overflow: hidden;

  .listNull {
    width: 100%;
    overflow: hidden;
    top: 50% !important;
    height: 100% !important;
    transform: translate(0, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    image, .taro-img {
      width: 295px;
      height: 295px;
      margin: 86px auto 35px;

    }

    .text {
      font-size: 24px;
      color: #666;

      text {
        color: #f58240;
      }
    }
  }

  .member-bottom-wrapper {
    z-index: 9999;
    position: relative;
    left: 0;
    top: -34Px;
    background: url(https://resource.ivcheng.com/upload/images/20220908/1662630800654_402.png) 0Px -1Px no-repeat;
    padding-bottom: 35Px;
    background-size: 100%;
  }

  .header-bg {
    background: url(https://resource.ivcheng.com/upload/images/20220908/1662617522533_759.png) 100% no-repeat;
    background-size: 100% 100%;
    padding-bottom: 150Px;
    position: relative;
    display: flex;
    flex-direction: column;

    .member-card {
      position: absolute;
      top: 42Px;
      width: 100%;
    }

    .card-swiper-item .member-card-wrapper {
      transform: scale(0.9);
    }

    .card-swiper-item:not(.card-swiper-item-actives) {
      position: relative;
      top: 8Px;
    }

    .card-swiper-item-active .member-card-wrapper, .card-swiper-item.swiper-slide-active .member-card-wrapper {
      transform: scale(1) !important;
    }

    .member-card-wrapper {
      overflow: hidden;
      padding-top: 25Px;
      border-radius: 18px;
      position: relative;
      background-size: cover !important;

      .payment-record {
        background-color: rgba(0, 0, 0, 0.24);
        border-radius: 11Px;
        border: 1Px rgba(151, 151, 151, 0.24);
        padding: 2Px 11Px 2Px 11Px;
        color: rgba(255, 255, 255, 1);
        font-size: 12Px;
        text-align: center;
        line-height: 17Px;
        position: absolute;
        right: 20px;
        top: 20px;
      }

      .member-card-box {
        display: flex;
        justify-content: space-between;
        flex-direction: row;
        position: relative;
      }

      .member-card-image {
        position: absolute;
        right: -3Px;
        bottom: 0;
        width: 108Px;
        height: 84Px;
      }

      .member-card-info {
        padding-left: 29Px;
        margin-bottom: 27Px;
        flex-direction: column;
        display: flex;
        width: calc(100% - 39px);

        .member-info-title {
          font-weight: bold;
          color: #372204;
          font-size: 24Px;
          line-height: 36Px;
          margin-right: 10Px;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }

        .member-info-sub-title {
          color: #6c4510;
          font-size: 12Px;
          line-height: 17Px;
          margin-top: 3Px;
        }
      }
    }
  }

  .rights-and-interests-wrapper {
    display: flex;
    margin-bottom: 26Px;

    .rights-and-interests-items {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      width: 25%;
      font-size: 24px;
      color: #333;

      .rights-and-interests-text {
        margin-top: 4Px;
      }
    }
  }

  .member-price {
    text-shadow: 0 0 .1px;
    color: black;
    font-size: 16Px;
    padding-left: 24Px;
  }

  .price-box {
    padding: 0 30px;
    margin-bottom: 45Px;
    padding-top: 6Px;
    display: flex;
    flex-wrap: wrap;

    .price-active {
      border: 2Px solid #f6d59a !important;
      background-color: #fdf9f0 !important;
    }

    .price-items:nth-child(3n) {
      margin-right: 0;
    }

    .price-items {
      border: 2Px solid transparent;
      box-sizing: border-box;
      width: calc(100% / 3 - 17px);
      margin-right: 10Px;
      text-align: center;
      background-color: white;
      border-radius: 13Px;
      box-shadow: 0 0 4Px 0 rgb(211, 211, 211);
      padding: 28Px 0 18Px;
      margin-top: 14Px;
      position: relative;

      .choice-active-price {
        position: absolute;
        top: 0;
        left: 0;
        width: 32Px;
        height: 20Px;
      }

      .month {
        color: #6c4510;
        font-size: 12Px;
        line-height: 17Px;
      }

      .price-number {
        font-family: Avenir;
        margin-top: 8Px;
        word-break: break-all;

        .price-symbol {
          height: 33Px;
          color: #6c4510;
          font-size: 14Px;
          line-height: 20Px;
        }

        .price-num {
          height: 33Px;
          color: #6c4510;
          font-size: 24Px;
          text-align: left;
          line-height: 20Px;
        }
      }

      .price-bottom-number {
        height: 17Px;
        color: #8a8a8a;
        font-size: 12Px;
        line-height: 11Px;
        margin: 6Px 4Px 0 3Px;
      }
    }
  }

  .left-check-box {
    position: relative;
    top: 4px;
  }

  .weappleft-check-box {
    top: -2px !important;
  }

  .member-pay-btn-fixed {
    position: fixed;
    bottom: 0;
    left: 0;
    background: #fff;
    padding: 20px 30px calc(calc(env(safe-area-inset-bottom) / 2) + 10Px);
    width: -webkit-fill-available;
  }

  .confirm-open-btn {
    color: rgba(105, 65, 11, 1);
    font-size: 31px;
    text-align: center;
    background-image: linear-gradient(90deg, rgba(255, 228, 188, 1.000000) 0, rgba(255, 191, 105, 1.000000) 100.000000%);
    border-radius: 42px;
    margin: 0 0 40px;
    padding: 20px 0;
    font-weight: bold;
  }

  .agreement {
    font-size: 24px;
    color: $color-font-secondry;
    display: flex;
    align-items: center;
    justify-content: center;

    .taro-checkbox_checked {
      width: 30px;
      height: 30px;
      border: 1Px solid #ddd;
      font-size: 32px;
      top: 4px;
      border-radius: 50%;
    }

    checkbox .wx-checkbox-input {
      width: 22px;
      height: 22px;
      border: 1Px solid #ddd;
    }

    checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
      font-size: 18px;
      transform: translate(-50%, -55%) scale(1);
    }

    .clause {
      color: $mainColor;
    }

    .open-text-left {
      margin-left: 20px;
    }
  }
}
